<template>
  <div class="home_index" @click="relatedShowFun">
    <!-- 登入模式 -->
    <div class="login_maxbox" v-show="boxTF">
      <div class="login_box">
        <span> 开启用户模式 </span>
        <div class="input_box">
          <el-input
            v-model="userInput"
            placeholder="请输入用户名"
            @keyup.enter.native="btnFun"
          ></el-input>
          <!--  -->
          <div class="line"></div>
          <el-input
            :show-password="true"
            v-model="passInput"
            placeholder="请输入密码"
            @keyup.enter.native="btnFun"
          ></el-input>
        </div>
        <div class="error_box">
          <!-- <i v-show="errorTF" class="el-icon-error"></i>
          <span v-show="errorTF">密码错误</span> -->
        </div>
        <div class="btn_box">
          <el-button @click="boxTFFun">取消</el-button>
          <el-button @click="btnFun" type="primary">确认</el-button>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="top-head">
      <!-- 1 -->
      <!-- 跳转 -->
      <div class="jump_box" v-if="jumpTF">
        <div v-for="(item, idx) in jumpObj" :key="idx" @click="jumpFun(item.link)">
          <img class="link_icon" src="@/assets/special.svg" alt="" />
          <span>{{ item.text }}</span>
        </div>
      </div>
      <!-- 空位 -->
      <div v-else></div>
      <!-- 2 -->
      <div class="user_box">
        <div class="user-icon" @click="boxTFFun"></div>
        <div class="user-name" @click="boxTFFun">
          {{ jumpTF ? "osint" : "访客模式" }}
        </div>
        <div class="user-time">
          {{ gettime }}
          <!-- 2020/11/1<span>&nbsp;&nbsp;&nbsp;</span>12:00:00 -->
        </div>
      </div>
    </div>
    <Search :keyValue="value" ref="searchRef">
      <div class="title">开源综合情报百科</div>
    </Search>
    <!--首页tab展示  -->
    <div class="index_maxbox">
      <div class="index_list">
        <div class="newsList">
          <!-- 轮播图左右箭头 -->
          <!-- <div class="arrow_left" v-show="carouselNum != 0" @click="prev">
            <img src="@/assets/common/left.svg" alt="" srcset="" />
          </div>
          <div
            class="arrow_right"
            v-show="lengthNum != 0 && carouselNum != lengthNum - 1"
            @click="next"
          >
            <img src="@/assets/common/right.svg" alt="" srcset="" />
          </div> -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="网站" name="网站">
              <!--   网站tab内容  轮播效果 -->
              <el-carousel
                v-if="activeName == '网站'"
                direction="vertical"
                :autoplay="true"
                :loop="true"
                trigger="click"
                height="350px"
                indicator-position="none"
                :interval="5000"
                arrow="never"
                class="banner"
                ref="carouselRef"
              >
                <el-carousel-item
                  v-for="(item, idx) in website.carouselArr"
                  :key="idx"
                  name="idx"
                >
                  <tabItem :tabList="item" />
                </el-carousel-item>
              </el-carousel>
            </el-tab-pane>
            <el-tab-pane label="微信公众号" name="微信公众号">
              <!--   轮播效果 -->
              <el-carousel
                v-if="activeName == '微信公众号'"
                direction="vertical"
                :autoplay="true"
                :loop="true"
                trigger="click"
                height="350px"
                indicator-position="none"
                :interval="5000"
                arrow="never"
                class="banner"
                ref="carouselRef2"
              >
                <el-carousel-item
                  v-for="(item, idx) in weixin.carouselArr"
                  :key="idx"
                  name="idx"
                >
                  <tabItem :tabList="item" typeStr="微信公众号" />
                </el-carousel-item>
              </el-carousel>
            </el-tab-pane>
            <!-- </transition> -->
            <el-tab-pane label="Twitter" name="Twitter">
              <!--   轮播效果 -->
              <el-carousel
                v-if="activeName == 'Twitter'"
                direction="vertical"
                :autoplay="true"
                :loop="true"
                trigger="click"
                height="350px"
                indicator-position="none"
                :interval="5000"
                arrow="never"
                class="banner"
                ref="carouselRef3"
              >
                <el-carousel-item
                  v-for="(item, idx) in twitter.carouselArr"
                  :key="idx"
                  name="idx"
                >
                  <tabItem :tabList="item" />
                </el-carousel-item>
              </el-carousel>
            </el-tab-pane>
            <el-tab-pane label="FaceBook" name="FaceBook">
              <!--   轮播效果 -->
              <el-carousel
                v-if="activeName == 'FaceBook'"
                direction="vertical"
                :autoplay="true"
                :loop="true"
                trigger="click"
                height="350px"
                indicator-position="none"
                :interval="5000"
                arrow="never"
                class="banner"
                ref="carouselRef5"
              >
                <el-carousel-item
                  v-for="(item, idx) in faceBook.carouselArr"
                  :key="idx"
                  name="idx"
                >
                  <tabItem :tabList="item" />
                </el-carousel-item>
              </el-carousel>
            </el-tab-pane>
            <el-tab-pane label="微博" name="微博">
              <!--   轮播效果 -->
              <el-carousel
                v-if="activeName == '微博'"
                direction="vertical"
                :autoplay="true"
                :loop="true"
                trigger="click"
                height="350px"
                indicator-position="none"
                :interval="5000"
                arrow="never"
                class="banner"
                ref="carouselRef4"
              >
                <el-carousel-item
                  v-for="(item, idx) in weibo.carouselArr"
                  :key="idx"
                  name="idx"
                >
                  <tabItem :tabList="item" typeStr="微博" />
                </el-carousel-item>
              </el-carousel>
            </el-tab-pane>
            <el-tab-pane label="YouTube" name="油管">
              <!--   轮播效果 -->
              <el-carousel
                v-if="activeName == '油管'"
                direction="vertical"
                :autoplay="true"
                :loop="true"
                trigger="click"
                height="350px"
                indicator-position="none"
                :interval="5000"
                arrow="never"
                class="banner"
                ref="carouselRef6"
              >
                <el-carousel-item
                  v-for="(item, idx) in pipeline.carouselArr"
                  :key="idx"
                  name="idx"
                >
                  <tabItem :tabList="item" />
                </el-carousel-item>
              </el-carousel>
            </el-tab-pane>
            <!-- <el-tab-pane label="其他" name="其他">
              <el-carousel
                v-if="activeName == '其他'"
                :autoplay="true"
                :loop="true"
                trigger="click"
                height="350px"
                indicator-position="none"
                :interval="5000"
                arrow="never"
                class="banner"
                ref="carouselRef7"
              >
                <el-carousel-item
                  v-for="(item, idx) in rest.carouselArr"
                  :key="idx"
                  name="idx"
                >
                  <tabItem :tabList="item" />
                </el-carousel-item>
              </el-carousel>
            </el-tab-pane> -->
          </el-tabs>
        </div>
        <div class="wrap hot-wrap">
          <div class="hide-scroll scroll_box">
            <div class="title">{{ hotInformation }}</div>
            <div
              class="hot-con flex-center-start"
              v-for="(item, index) in hotList"
              :key="index"
            >
              <div class="hot-num flex-center" v-if="index == 0" :class="'active0'">
                {{ index + 1 }}
              </div>
              <div class="hot-num flex-center" v-if="index == 1" :class="'active1'">
                {{ index + 1 }}
              </div>
              <div class="hot-num flex-center" v-if="index == 2" :class="'active2'">
                {{ index + 1 }}
              </div>
              <div
                class="hot-num flex-center"
                v-if="index !== 1 && index !== 2 && index !== 0"
              >
                {{ index + 1 }}
              </div>
              <div
                class="hot-tit one-line-ellipsis"
                ref="history"
                @click="getValue($event)"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部logo -->
    <!-- <div class="bottom_logo">
      <img src="@/assets/common/bottom_logp.png" alt="" srcset="" />
    </div> -->
  </div>
</template>

<script>
import Search from "@/components/search";
import tabItem from "./tab_item";
import Axios from "axios";
export default {
  components: {
    Search,
    tabItem,
  },
  data() {
    return {
      jumpTF: false, //是否专题模式
      boxTF: false, //是否登入显示
      errorTF: false, //是否显示错误
      verifyObj: {
        userVal: "osint",
        passwordVal: "zhuantifenxi", //密码
      },
      userInput: "",
      passInput: "",
      jumpObj: [
        {
          text: "里根号专题情报分析",
          link: "ligenhaoUrl",
        },
        {
          text: "东伊运专题情报分析",
          link: "dongyiyunUrl",
        },
      ],
      value: "",
      activeName: "网站",
      gettime: "",
      clsTime: null,
      // intervalNum: "5000", //5秒
      carouselNum: 0, //轮播起始
      carouselArr: [], //循环几次
      // 网站：
      website: {
        carouselArr: [], //循环几次
      },
      // 微信公众号：
      weixin: {
        carouselArr: [], //循环几次
      },
      // Twitter：
      twitter: {
        carouselArr: [], //循环几次
      },
      // 微博：
      weibo: {
        carouselArr: [], //循环几次
      },
      // FaceBook：
      faceBook: {
        carouselArr: [], //循环几次
      },
      // 油管：
      pipeline: {
        carouselArr: [], //循环几次
      },
      // 其他：
      rest: {
        carouselArr: [], //循环几次
      },
      refObj: {
        网站: "carouselRef",
        微信公众号: "carouselRef2",
        Twitter: "carouselRef3",
        微博: "carouselRef4",
        FaceBook: "carouselRef5",
        油管: "carouselRef6",
        其他: "carouselRef7",
      },
      hotInformation: "最近搜索",
      hotList: [
        {
          orderNum: 1,
          title: "连陈水扁都反对蔡当局严审中天新闻台",
        },
        {
          orderNum: 1,
          title: "12e345",
        },
        {
          orderNum: 1,
          title: "连陈水扁都反对蔡当局严审中天新闻台",
        },
        {
          orderNum: 1,
          title: "连陈水扁都反对蔡当局严审中天新闻台",
        },
        {
          orderNum: 1,
          title: "连陈水扁都反对蔡当局严审中天新闻台",
        },
        {
          orderNum: 1,
          title: "连陈水扁都反对蔡当局严审中天新闻台",
        },
        {
          orderNum: 1,
          title: "连陈水扁都反对蔡当局严审中天新闻台",
        },
        {
          orderNum: 1,
          title: "连陈水扁都反对蔡当局严审中天新闻台",
        },
        {
          orderNum: 1,
          title: "连陈水扁都反对蔡当局严审中天新闻台",
        },
        {
          orderNum: 1,
          title: "连陈水扁都反对蔡当局严审中天新闻台",
        },
      ],
    };
  },
  computed: {
    lengthNum() {
      let t = [];
      switch (this.activeName) {
        case "网站":
          t = this.website.carouselArr;
          break;
        case "微信公众号":
          t = this.weixin.carouselArr;
          break;
        case "Twitter":
          t = this.twitter.carouselArr;
          break;
        case "微博":
          t = this.weibo.carouselArr;
          break;
        case "FaceBook":
          t = this.faceBook.carouselArr;
          break;
        case "油管":
          t = this.pipeline.carouselArr;
          break;
        // 其他：
        default:
          t = this.rest.carouselArr;
          break;
      }
      return t.length;
    },
  },
  methods: {
    boxTFFun() {
      if (this.jumpTF) {
        return;
      }
      this.boxTF = !this.boxTF;
    },
    btnFun() {
      if (this.jumpTF) {
        return;
      }
      if (!this.userInput) {
        this.$message.error("请输入用户名");
        return;
      }
      if (!this.passInput) {
        this.$message.error("请输入密码");
        return;
      }

      if (
        this.userInput == this.verifyObj.userVal &&
        this.passInput == this.verifyObj.passwordVal
      ) {
        this.jumpTF = true;
        sessionStorage.jumpTF = "OK";
        // 用户名保存
        sessionStorage.userName = this.userInput;
        this.boxTF = false;
        this.$message({
          message: "登入成功",
          type: "success",
        });
      } else {
        this.$message.error("用户名或者密码错误");
      }
    },
    jumpFun(url) {
      if (localStorage[url]) {
        // alert(localStorage[url]);
        window.open(localStorage[url]);
        // window.open("https://www.baidu.com/");
      } else {
        alert("暂无跳转地址");
      }
    },
    relatedShowFun() {
      try {
        this.$refs.searchRef.relatedShowFun();
      } catch {}
    },
    // 时间：
    getTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    // 上一个：
    prev() {
      this.carouselNum -= 1;
      if (this.carouselNum < 0) {
        this.carouselNum = 0;
      }
      // console.log("上一个:", this.carouselNum);
      this.setActiveItem(this.carouselNum);
    },
    // 下一个：
    next() {
      this.carouselNum += 1;
      let t = [];
      switch (this.activeName) {
        case "网站":
          t = this.website.carouselArr;
          break;
        case "微信公众号":
          t = this.weixin.carouselArr;
          break;
        case "Twitter":
          t = this.twitter.carouselArr;
          break;
        case "微博":
          t = this.weibo.carouselArr;
          break;
        case "FaceBook":
          t = this.faceBook.carouselArr;
          break;
        case "油管":
          t = this.pipeline.carouselArr;
          break;
        // 其他：
        default:
          t = this.rest.carouselArr;
          break;
      }
      if (this.carouselNum >= t.length) {
        this.carouselNum = t.length;
      }
      this.setActiveItem(this.carouselNum);
    },
    setActiveItem(idx) {
      this.$refs[this.refObj[this.activeName]].setActiveItem(idx);
    },
    //历史记录点击事件
    getValue(event) {
      //将历史记录本地存储
      sessionStorage.showTF = "1";
      localStorage.history = this.hotList;
      //获取点击元素的文本
      this.value = event.target.innerText;
      // 跳转：
      this.$router.push({
        name: "results",
        params: {
          keyValue: this.value,
        },
      });
    },
    //分页Fun： 数组，每页个数：num
    pageFun(arr, num = 5) {
      let a = [];
      arr.forEach((item, idx) => {
        let i = Math.floor(idx / num);
        if (!a[i]) {
          a[i] = [];
        }
        a[i].push(item);
      });
      return a;
    },
    getMediaTypeFun() {
      this.$api.getMediaType(this.activeName).then((res) => {
        // console.log("dadadada:", res, res.length);
        let resArr = this.pageFun(res);
        // 因为只有2页，会左右缩放，所以，当length 为 2的时候，来特俗处理
        if (resArr.length == 2) {
          resArr = [...resArr, ...resArr];
        }
        // console.log("看看看", resArr);
        switch (this.activeName) {
          case "网站":
            this.website.carouselArr = resArr;
            // console.log("", resArr);
            this.website.carouselNum = 0;
            break;
          case "微信公众号":
            this.weixin.carouselArr = resArr;
            this.weixin.carouselNum = 0;
            break;
          case "Twitter":
            this.twitter.carouselArr = resArr;
            this.twitter.carouselNum = 0;
            break;
          case "微博":
            this.weibo.carouselArr = resArr;
            this.weibo.carouselNum = 0;
            break;
          case "FaceBook":
            this.faceBook.carouselArr = resArr;
            this.faceBook.carouselNum = 0;
            break;
          case "油管":
            this.pipeline.carouselArr = resArr;
            this.pipeline.carouselNum = 0;
            break;
          // 其他：
          default:
            this.rest.carouselArr = resArr;
            this.rest.carouselNum = 0;
            break;
        }
        // console.log("结束时间:", new Date());
      });
    },
  },
  watch: {
    activeName() {
      // 本地缓存：
      sessionStorage.activeName = this.activeName;
      // console.log("哒哒哒", sessionStorage.activeName);
      this.carouselNum = 0;
      this.getMediaTypeFun();
      // console.log("开始时间:", new Date());
    },
  },
  created() {
    // axios 前缀存储
    this.$api.axiosUrlset();
    // 赋值
    // sessionStorage.activeName = this.activeName;
    if (sessionStorage.activeName) {
      this.activeName = sessionStorage.activeName;
    }
    // 是否开启了管理员
    if (sessionStorage.jumpTF == "OK") {
      this.jumpTF = true;
    }
    // 清理缓存
    sessionStorage.clear();
    // 还要保存 管理状态啊
    if (this.jumpTF) {
      sessionStorage.jumpTF = "OK";
    }
  },
  mounted() {
    Axios.get(localStorage.axiosUrl + "/getHistoryInfo").then((res) => {
      // console.log(res);
      this.hotList = res.data;
    });
    // console.log("开始时间:", new Date());
    // 时间：
    this.clsTime = setInterval(() => {
      this.getTime();
    }, 1000);
    // 数据：
    this.getMediaTypeFun();
  },
  destroyed() {
    if (this.clsTime) {
      clearInterval(this.clsTime);
    }
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.home_index {
  .login_maxbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0, 0, 0, 0.6);
    z-index: 999;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    .login_box {
      box-sizing: border-box;
      padding: 20px;
      border-radius: 10px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #2d73ff;
      > span {
        margin-bottom: 20px;
      }
      .input_box {
        box-sizing: border-box;
        width: 220px;
        .line {
          box-sizing: border-box;
          height: 10px;
          width: 100%;
        }
      }
      .error_box {
        color: #d9001b;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
        > span {
          margin-left: 4px;
        }
      }
    }
    .btn_box {
      width: 100%;
      box-sizing: border-box;
      // margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
    }
  }
  .jump_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #000000;
    font-size: 16px;
    height: vh(60);
    // padding: 0 20px;
    > div {
      box-sizing: border-box;
      margin: 0 10px;
      cursor: pointer;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .link_icon {
      box-sizing: border-box;
      height: 14px;
      // transform: rotate(45deg);
      margin-right: 6px;
    }
  }
  .top-head {
    height: vh(60);
    // min-height: 60px;
    // max-height: 60px;
    // background: pink;
    padding: 0 20px;
    margin-bottom: vh(100);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-content: center;
    // width: 100%;
    .user_box {
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .user-icon {
        margin-right: 6px;
        width: 18px;
        height: 22px;
        background-image: url(~@/assets/common/icon-yonghu.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
      }
      .user-name {
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
  .zsBtn {
    position: relative;
    left: 80%;
    top: -40px;
    border-radius: 10px;
    background: #2d73ff;
  }
  .index_maxbox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .index_list {
      padding: 20px 0;
      box-sizing: border-box;
      width: 960px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      // flex-direction: column;
      // margin-left: 330px;
      // min-height: 460px;

      .newsList {
        box-sizing: border-box;
        width: 800px;
        padding-left: 20px;
        margin-right: 40px;
        // float: left;
        // max-width: 600px;
        // height: 100px;
        // position: relative;
        // background: red;
        .arrow_left {
          position: absolute;
          left: -25px;
          top: 190px;
          width: 24px;
          height: 74px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .arrow_right {
          position: absolute;
          right: -25px;
          top: 190px;
          width: 24px;
          height: 74px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .hot-wrap {
        // float: left;
        // margin-left: 620px;
        // position: relative;
        // top: -100px;
        // width: 100%;
        // background: red;
        // padding: 0.2rem 0.2rem 0.2rem 0.3rem;
        // border: none;
        // border-radius: 0.08rem;
        // margin-left: 80px;
        box-sizing: border-box;
        margin-top: 10px;
        margin-left: 60px;
        font-size: 12px;

        .hide-scroll {
          // width: calc(100% + 17px + 0.2rem);
          // overflow-y: scroll;
          // max-height: 4.5rem;
          // padding-top: 20px;
          .title {
            font-size: 16px;
            font-weight: bold;
            color: #444;
            // line-height: 30px;
            margin-bottom: 28px;
          }
        }
        .hot-con {
          // line-height: 0.4rem;
          font-size: 16px;
          margin: 10px 0;
          .hot-num {
            margin-right: 0.1rem;
            width: 20px;
            height: 20px;
            &.active0 {
              background: #d9001b;
              border-radius: 50%;
              color: #ffffff;
            }
            &.active1 {
              background: #f59a23;
              border-radius: 50%;
              color: #ffffff;
            }
            &.active2 {
              background: #2d73ff;
              border-radius: 50%;
              color: #ffffff;
            }
          }
        }
      }
    }
  }

  .bottom_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    // position: fixed;
    // top: 650px;
    // left: 430px;
    img {
      width: 400px;
      // height: 50px;
      // width: 100%;
      // height: 100%;
    }
  }
  .hot-tit {
    cursor: pointer;
  }
  .hot-tit:hover {
    color: rgb(45, 115, 255);
  }
}
</style>
